<!--故障解决设置 -->
<template>
    <div class="Maintenance">
        <div class="Maintenance-left">
            <div class="maintenance" v-for="(v, i) in modelsArr" :class="[modelId.assemblyId == v.assemblyId ? 'on' : '']"
                :key="v.assemblyId">
                <div class="title" @click="modelClick(v)"> {{ v.assemblyName }}</div>
                <img class="img" @click="delModeClick(v)" src="../../../assets/imgx/off.png" alt="">

            </div>

        </div>
        <div class="Maintenance-right">
            <div class="table">
                <slotCom>
                    <template v-slot:com>
                        <tableBox :tableList="tableList" @errorFun="errorFun" @delTableFun="delTableFun" @lookFun="lookFun"
                            @editItem="editItem" />
                    </template>
                </slotCom>

            </div>
            <pageChild :total="total" :pageSize="pageSize" :current="current" @currentChange="currentChange" />
        </div>
        <div class="zezaoc">
            <div @click="isbool1 = !isbool1; EDIT_OBJ = {}">添加</div>

            <el-upload accept=".xls,.xlsx" :show-file-list="false" class="apply-import-button" name="file"
                :before-upload="beforeAvatarUpload" :http-request="httprequest" action="/biz/mesConfig/importData">
                <el-button size="small" class="btn-custom-import">批量导入</el-button>
            </el-upload>
            <div @click="doScFun">下载模板</div>

            <Btn_box />

        </div>

        <div class="listzzc" v-if="isbool1">
            <topCom>
                <template v-slot:com>
                    <div class="listzzc_2">
                        <div class="listzzc_3">
                            <div class="listzzc_top">
                                <div>{{ EDIT_OBJ.workpieceId ? '编辑' : '添加' }}</div>
                                <img src="../../../assets/imgx/message-bg.png" alt="">

                                <span class="error" @click="isbool1 = false">×</span>

                            </div>
                            <div class="listzzc_center">
                                <addComponent @setAddBox="setAddBox" @modelClickFun="modelClickFun" :modelId="modelId"
                                    :modelsArr="modelsArr" @errorFun="errorFun" :editListObj="EDIT_OBJ" :options="options"
                                    @ftorub="ftorub" />
                            </div>
                        </div>
                    </div>
                </template>
            </topCom>
        </div>

        <div class="servebox">
            &nbsp;
            <input type="text" placeholder="请输入零部件名称" v-model="serve">
            <div class="serveimg">
                <img src="../../../assets/imgx/seel.png" @click="imgClick" alt="">
            </div>
        </div>

        <div class="lod" v-show="elIconWarningBool">
            <lodFile :doScTitle="doScTitle" />
        </div>
    </div>
</template>
<script>
import { mapActions, mapMutations } from "vuex"
import { tableListApi, getWorkPage, addFileApi } from "@/api/fulitModelApi/index"
import { GetModuleApi, delModelApi } from "@/api/SettingsApi/index"

export default {
    components: {
        tableBox: () => import("./tableChildcom/index.vue"),
        addComponent: () => import("./addchildren/index.vue"),
        slotCom: () => import("@/components/SslotCom/index.vue"),
        topCom: () => import("@/components/SslotCom/top_index.vue"),
        lodFile: () => import("@/components/outfilelod/index.vue"),
        Btn_box: () => import("@/components/uponelevel/index.vue"),
        pageChild: () => import("@/components/pagination/index.vue"),

    },
    data() {
        return {
            elIconWarningBool: false,
            doScTitle: "",
            isbool1: false,
            isbool: false,
            playIsBooL: false,
            modelsArr: [],
            tableList: [],
            file: "",
            modelId: {},
            show: "",
            options: [],
            except: {},
            getPlan: [],
            EDIT_OBJ: {},
            serve: "",
            id: "",
            time: "",
            total: 0,
            pageSize: 10,
            current: 1,
        }
    },

    mounted() {
        this.sideFun()

    },
    destroyed() {
        clearInterval(this.time)
    },
    methods: {
        ...mapActions("Tableindex", ["asyncmy_table_function"]),
        ...mapMutations("Tableindex", ["modelfun"]),
        modelClickFun(item) {
            getWorkPage({
                assemblyId: item
            }).then(res => {
                if (res.code == 200) {
                    this.options = res.data.list

                } else {
                    this.errorFun(res)

                }

            })
        },
        delModeClick(item) {
            delModelApi({ assemblyId: item.assemblyId }).then(res => {
                if (res.code != 200) {
                    this.errorFun(res)

                }
            })
        },
        ftorub() {
            this.my_table_fun(this.modelId.assemblyId)

        },
        imgClick() {
            this.my_table_fun(this.modelId.assemblyId)
        },
        errorFun(item) {

            this.doScTitle = item.msg;
            this.elIconWarningBool = true
            clearInterval(this.time3)
            this.time3 = setInterval(() => {
                this.elIconWarningBool = false
            }, 3000)

        },
        currentChange(current) {
            this.current = current
            this.id = this.modelId.assemblyId;

            this.my_table_fun(this.id)
        },
        setAddBox() {
            this.isbool1 = false;
            this.my_table_fun(this.modelId.assemblyId)

        },

        lookFun() {
            this.playIsBooL = true;
        },
        editItem(item) {
            this.EDIT_OBJ = item;
            this.isbool1 = true;
            this.modelClickFun(this.modelId.assemblyId)
        },
        beforeAvatarUpload(file) {
            console.log(file.type);
            const isJPG = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
            if (!isJPG) {
                this.$message.error('只能是execl文件');
            }

            return isJPG;
        },
        httprequest(file) {
            let formData = new FormData()
            formData.append('file', file.file)
            addFileApi({
                file: formData,
                updateSupport: true
            }).then(res => {
                if (res.code == 200) {

                    if (res.code == 200) {
                        this.sideFun()


                    } else {
                        this.errorFun(res)
                    }

                }
            })
        },
        delTableFun() {
            this.my_table_fun(`${this.modelId.assemblyId}`)
        },
        doScFun() {

            window.location.href = window.location.origin + '/media/assets/templateExceptPlan.xlsx'
        },


        modelClick(item) {
            this.modelId = item;
            this.isbool1 = false
            this.modelfun(item)
            this.my_table_fun(item.assemblyId);
            localStorage.setItem("id", item.assemblyId)
        },
        sideFun() {
            GetModuleApi({
                equipmentId: this.$store.state.UserIndex.equipment.equipmentId
            }).then(res => {
                if (res.code == 200) {
                    this.modelsArr = res.data;
                    this.modelId = res.data[0]
                    if (this.modelId) {
                        this.my_table_fun(this.modelId.assemblyId);
                    }
                } else {
                    this.errorFun(res)
                }
            })



        },
        my_table_fun(id) {

            tableListApi({
                searchKey: this.serve,
                current: this.current,

                size: this.pageSize,
                assemblyId: id,
            }).then(res => {
                if (res.code == 200) {

                    // for (let index = 0; index <= 10; index++) {
                    //     if (res.data.list.length >= 10) {
                    this.tableList = res.data.list
                    this.total = Number(res.data.total);
                    this.pageSize = res.data.pageSize;
                    this.current = res.data.pageNum;

                    //     } else {
                    //         res.data.list.push({ "title": "1" })
                    //     }

                    // }


                } else {
                    this.errorFun(res)

                }
            })
        },
    }
}
</script>
<style lang="less" scoped>
.lod {
    position: fixed;
    top: 5%;
    left: 790px;
    z-index: 999;

}

.table {
    width: 99%;
    height: 778px;
    overflow: auto;


}

.zezaoc /deep/ .el-upload-list {
    display: none !important;
}

.el-button--small {
    padding: 9px 13px;
    font-size: 16px;
    border-radius: 3px;
}

.servebox {
    width: 218px;
    height: 20px;
    position: absolute;
    left: 8%;
    top: -8%;
    display: flex;
    border: 1px solid #00469C;
    border-radius: 40px;
    z-index: 999;

    input {
        width: 95%;
        border: 0;
        outline: 0;
        background: none;
        color: #375584;
    }

    .serveimg {
        width: 30px;
        height: 25px;
        position: relative;

        img {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            left: 3px;
        }
    }

}

.el-button--primary {
    width: 84px;
    height: 34px;
    background: #031231;
    opacity: 1;
    border: 0px solid #5B9FC3;
    color: white;
}

.el-table th.el-table__cell {
    background: rgba(91, 159, 195, .5);
    text-align: center;
    color: white;

}

.el-pagination {

    margin-top: 10px;
}

.listzzc {
    background: #091123;
    border: 1px solid #113D71;
    width: 452px;
    height: 380px;

    opacity: 0.95;
    position: absolute;
    top: 7%;
    right: 36%;


    .listzzc_2 {
        width: 100%;
        height: 100%;

        background: rgb(3 55 139 / 36%);

        .listzzc_3 {
            width: 100%;
            height: 100%;
            box-shadow: inset 0px 0px 54px 0px #0d3eb8b5;

            .listzzc_top {
                width: 100%;
                height: 29px;
                display: flex;
                position: relative;

                div {
                    width: 15%;
                    height: 29px;
                    text-align: center;
                    height: 29px;
                    line-height: 29px;
                    color: white;
                }

                img {
                    width: 90%;
                    height: 100%;
                }

                .error {
                    width: 18px;
                    height: 18px;
                    text-align: right;
                    font-size: 36px;
                    font-weight: bold;
                    color: #0E66B3;
                    z-index: 99;
                    cursor: pointer;
                    line-height: 22px;
                    position: absolute;
                    right: 15px;

                }
            }

            .listzzc_center {
                width: 100%;
                height: 40px;
            }
        }
    }
}



.on {
    border: 1px solid #5ca0c3;
    box-shadow: 0 0 13px #007eff inset;
}

.btn {
    margin: 10%;
    background: #031231;
    width: 81px;
    height: 50px;
    opacity: 1;
    border: 1px solid #5B9FC3;
    text-align: center;
    line-height: 50px;
    color: white;
}


.Maintenance {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;


    .Maintenance-left {
        height: 100%;
        overflow: hidden;
        cursor: pointer;
        box-sizing: border-box;

        .maintenance {

            border: 1px solid #5B9FC3;
            text-align: center;
            line-height: 30px;
            color: white;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 10px 25px 10px 10px;
            width: 81px;
            height: 50px;
            background: #031231;
            display: flex;
            flex-direction: column;
            align-items: center;

            .title {
                width: 100%;
                height: 30px;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .img {
                width: 20px;
                height: 20px;
            }
        }


    }


    .Maintenance-right {
        overflow-x: hidden;
        overflow-y: auto;
        color: #000;
        font-size: .7rem;
        font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, "黑体", Arial, Tahoma;
        height: 100%;
    }

    /*滚动条样式*/
    .Maintenance-right::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 5px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 2px;
    }

    .Maintenance-right::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 5px;
        -webkit-box-shadow: rgba(96, 150, 225, 1);
        background: rgba(96, 150, 225, 1);
        height: 2px !;

    }

    .Maintenance-right::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: rgba(96, 150, 225, 1);
        border-radius: 0;

    }

    .Maintenance-right {
        width: 100%;
        margin-top: 10px;
    }


    .zezaoc {
        height: 30px;
        position: fixed;
        font-size: 10px;
        top: 80px;
        left: 1480px;
        display: flex;
        cursor: pointer;

        div {
            width: 84.38px;
            height: 34.38px;
            background: #031231;
            opacity: 1;
            border: 1px solid #5B9FC3;
            text-align: center;
            line-height: 34.38px;
            color: white;
            margin: 0px 5px;

            .el-button--primary {
                height: 26px !important;
            }
        }

        .divitem {
            position: relative;
            border: 0px solid #5B9FC3;
            height: 40px;
            width: 95px;
            line-height: 40px;

            img {
                width: 100%;
                height: 100%;
            }


        }
    }
}


</style>